/* 抹平后台需要的数据结构与checkBoxGroup不匹配， 后台这种数据结构实难吐槽 */
<template>
  <div>
    <el-checkbox-group v-model="innerValue" @change="innerValueChange">
      <el-checkbox :label="item.value" v-for="item in checkBoxsData" :key="item.value">
        {{item.label}}
      </el-checkbox>
    </el-checkbox-group>      
  </div>
</template>

<script>
export default {
  props: {
    checkBoxsData: {
      type: Array,
      default: () => []
    },
    // 选中选项的Type
    valueType: {
      type: String,
      default: undefined
    },
    // 选中选项的Name
    valueName: {
      type: String,
      default: undefined
    }    
  },
  data() {
    return {
      innerValue: undefined // 内部记录checkboxGroup选项的值
    }
  },
  watch: {
    valueType: {
      handler (val) {
        this.innerValue = !val
          ? []
          : val.split(',').map(item => parseInt(item))
      },
      immediate: true
    }
  },
  methods: {
    getDefaultInnerValue () {
      if (!this.valueType) return []
      return this.valueType.split(',').map(item => parseInt(item))
    },
    innerValueChange (value) {
      const valueType = value.toString()
      const valueName = value.map(val => this.checkBoxsData.find(item => item.value === val).label).toString()
      this.$emit('update:valueType', valueType),
      this.$emit('update:valueName', valueName)
    } 
  }
}
</script>

<style lang="scss" scoped>
  .el-checkbox {
    width: 160px;
  }
</style>